<template>

  <el-dialog title="设置显示字段" :visible.sync="visible1" width="600px" @close="handleColse">
    <p style="text-align: right;padding-bottom: 14px;">
      <em class="pointer" @click="resetThList">恢复默认</em>
    </p>
    <el-transfer
      v-model="thNoShow"
      :props="{key: 'prop'}"
      :titles="['显示字段', '隐藏字段']"
      :data="thListCopy"
      class="th-box"
      @change="thListChange"
    />
    <span slot="footer" class="dialog-footer">
      <el-button size="small" class="cancel-btn defult" @click="handleColse">取消</el-button>
      <el-button size="small" type="success defult" @click="handleSubThList">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 设置的
    thList: {
      type: Object
    },
    // 默认的
    defaultTh: {
      type: Object
    }
  },

  data() {
    return {
      thListCopy: [],
      visible1: false,
      thNoShow: []
    }
  },

  computed: {

  },

  watch: {
    thList: {
      handler: function(val) {
        this.thListCopy = val
        this.setThNoShow()
      },
      deep: true,
      immediate: true // 初始化的时候也会执行
    },
    visible: {
      handler: function(val) {
        this.visible1 = val
      },
      deep: true,
      immediate: true // 初始化的时候也会执行
    }

  },

  methods: {

    setThNoShow() {
      const arr = []
      this.thListCopy.forEach(item => {
        if (!item.show) return arr.push(item.prop)
      })
      this.thNoShow = arr
    },

    handleColse() {
      this.$emit('update:visible', false)
    },

    handleSubThList() {
      const arr = []
      this.thListCopy.forEach(item => {
        const index = this.thNoShow.indexOf(item.prop)
        if (index == -1) {
          arr.push({ ...item,
            show: true
          })
        } else {
          arr.push({ ...item,
            show: false
          })
        }
      })
      this.$emit('thListChange', arr)
      this.$emit('update:visible', false)
    },
    resetThList() {
      this.thListCopy = JSON.parse(JSON.stringify(this.defaultTh))
      this.setThNoShow()
    }

  }
}
</script>

<style lang="scss" scoped="true">
  @import '~@/styles/variables.scss';
   .th-box::v-deep .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
    font-size: 14px;
  }
  .th-box::v-deep .el-transfer-panel{
    border-radius: 2px;
  }

  .th-box::v-deep .el-transfer__buttons {
    width: 150px;
    // display: flex;
    padding: 0;
    text-align: center;

    .el-button--primary,
    .el-button+.el-button {
      margin-left: 0px;
      color: #FFFFFF;
      background-color: $mainColor1 !important;
      border-color: $mainColor1 !important;
      padding: 8px 18px;
    }
  }

  .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
    line-height: 30px;
  }
</style>
